<template>
	<view class="kind">
		<view class="pageHeader dFlex jStart_aCenter" :style="{'height': pageHeader + 'px','padding-top': pageStatus + 'px'}">
			<u-icon name="arrow-left" size='18px' @click='back'></u-icon>
			<view class="search">
				<input type="text" v-model='kw' @input="initKindShop" placeholder="请输入关键字搜索">
			</view>
		</view>
		<view class="container dFlex jStart_aStart" :style="'height:'+(mainHeight - 12)+'px;'">
			<view class="zhonglei">
				<view @click="change_firstKind(item)" :class="['kindOne',item.id == sel_firstKind.id ? 'actKind' : '']" v-for="(item,index) in kindList" :key='item.id'>{{item.name}}</view>
			</view>
			<scroll-view class="content" :scroll-y='true' :show-scrollbar='false' @scrolltolower='loadMore'>
				<view :class="['tools','dFlex','jBetween_aStart',kindFlag?'showAll':'']">
					<view class="toolList">
						<view @click="change_secondKind('')" :class="['fenlei',!sel_secondKind.id ? 'actFL' : '']">全部</view>
						<view @click="change_secondKind(item)" :class="['fenlei',item.id == sel_secondKind.id ? 'actFL' : '']" v-for="(item,index) in sel_firstKind.twoCategory" :key='index'>{{item.name}}</view>
					</view>
					<view class="arrowIcon imgPublic dFlex jCenter_aCenter" @click='kindFlag = !kindFlag'>
						<u-icon v-if='!kindFlag' name="arrow-up" size="28"></u-icon>
						<u-icon v-if='kindFlag' name="arrow-down" size="28"></u-icon>
					</view>
				</view>
				<view class="sortTool dFlex jAround_aCenter">
					<view :class="['sortOne',orderby =='normal'?'actSort':'']" @click="changeSort('normal')">综合</view>
					<view :class="['sortOne',orderby =='salenum'?'actSort':'']" @click="changeSort('salenum')">销量</view>
					<view :class="['sortOne',orderby =='price'?'actSort':'']" @click="changeSort('price')">价格</view>
				</view>
				<view class='shops'>
					<view class="shopOne dFlex jStart_aStart" @click='change_chooseShop(item)' v-for="(item,index) in shops" :key='index'>
						<view class="shopImg imgPublic">
							<image :src="item.main_img" mode="widthFix"></image>
							<view class="choose" v-if='item.choose'>
								<u-icon name="checkbox-mark" color='#ffffff' size='12px'></u-icon>
							</view>
						</view> 
						<view class="shopInfo">
							<view class="name">{{item.title}}</view>
							<view class="prices dFlex jStart_aCenter">
								<view class='newPrice'>￥<text>{{item.price}}</text></view>
								<view class='oldPric'>￥{{item.old_price}}</view>
							</view>
							<view class='yjs dFlex jStart_aCenter'>
								<view class='yj'>佣金:￥{{item.commission.toFixed(2)}}</view>
								<view class='stock'>库存：{{item.stock}}</view>
							</view>
						</view>
					</view>
					<u-loadmore v-if='loading' :status="loading ? 'loading' : 'normal'" :load-text='{
						"loadmore": "轻轻上拉",
						"loading": "全力加载中~",
						"nomore": ""
					}'/>
					<view class='seat'></view>
				</view>
				<!-- <view class='shops empty imgPublic' v-else>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
				</view> -->
			</scroll-view>
		</view>
		<view :class="['btn_tools','dFlex','jBetween_aCenter',platform == 'ios' ? 'ios_safe' : '']">
			<view class="operate dFlex jStart_aCenter">
				<view class="selStatus dFlex jStart_aCenter" @tap='changeAll_sel'>
					<view class="statusIcon imgPublic">
						<image v-if="!sel_all_status" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
						<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
					</view>
					<text>全选</text>
				</view>
			</view>
			<view class="tj dFlex jEnd_aCenter">
				<view class="allPrice">共<text>{{selShop.length}}</text>件</view>
				<view class="jiesuan" @click="setShop">确认选择</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				status:"",
				platform:getApp().globalData.platform,
				pageHeader:getApp().globalData.pageHeader,
				pageStatus:getApp().globalData.pageStatus,
				mainHeight:0,
				
				kindFlag:false,
				kindList:[],
				page:1,
				canLoad:false,
				loading:false,
				kw:'',
				sel_firstKind:{},
				sel_secondKind:{},
				shops:[],
				orderby:'normal',
				ordertype:'desc',
				// 是否全选
				sel_all_status:false,
				selShop:[],
				selCount:0,
			}
		},
		onLoad(e){
			console.log(e);
			this.status = e.status ? e.status : ''; 
			this.selShop = e.selShop?JSON.parse(e.selShop):[];
			this.mainHeight = uni.getSystemInfoSync().windowHeight - this.pageHeader - 50;
		},
		onShow(){
			this.initKind();
		},
		methods:{
			// 设置商品
			setShop(){
				if(!this.selShop.length){
					uni.showToast({
						title:'至少选择一件商品',
						icon:"none"
					})
					return;
				}
				if(this.status){
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.$vm.goods = this.selShop;
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.setStorageSync('readyShop',this.selShop);
					uni.redirectTo({
						url:'./createGroupBuy',
					})
				}
			},
			// 修改选择商品
			change_chooseShop(shop){
				var findShopIdx = this.selShop.findIndex((item)=>{return item.id == shop.id});
				if(findShopIdx >= 0){
					shop.choose = false;
					this.selShop.splice(findShopIdx,1);
				}else{
					shop.choose = true;
					this.selShop.push(shop);
				}
			},
			// 修改排序
			changeSort(sort){
				this.orderby = sort;
				if(sort == 'price'){
					this.ordertype = this.ordertype == 'desc' ? 'asc' : 'desc';
				}else{
					this.ordertype = 'desc';
				}
				this.initKindShop();
			},
			// 选择一级分类
			change_firstKind(kind){
				this.sel_firstKind = kind;
				this.sel_secondKind = "";
				this.kw = '';
				this.page = 1;
				this.initKindShop();
			},
			// 选择二级分类
			change_secondKind(kind){
				this.kw = '';
				this.sel_secondKind = kind;
				this.page = 1;
				this.initKindShop();
			},
			// 加载更多
			loadMore(event){
				console.log(event);
				if(this.canLoad){
					this.loading = true;
					this.canLoad = false;
					this.page += 1;
					this.initKindShop();
				}
			},
			// 获取分类商品
			initKindShop(){
				if(this.page == 1){
					this.shops = [];
					uni.showLoading({
						title:'加载中...'
					})
				}
				this.tool.getData('/api/mall/getGoodsList',{
					id:this.sel_secondKind.id?this.sel_secondKind.id:this.sel_firstKind.id,
					keyword:this.kw?this.kw:'',
					page:this.page,
					size:10,
					is_top:'1',
					orderby:this.orderby, 
					ordertype:this.ordertype,
				}).then(res=>{
					console.log(res);
					uni.hideLoading()
					if(res){
						var list = res.map((item)=>{
							return {
								...item,
								commission:parseFloat(item.price) * parseFloat(item.service_rate) / 100,
								choose:this.selShop.findIndex((shop)=>{return shop.id == item.id}) >= 0 ? true : false,
							}
						});
						this.shops = this.page == 1 ? list : this.shops.concat(list);
						this.canLoad = res.length >= 10 ? true : false;
					}
					this.loading = false;
				}).catch(err=>{
					console.log(err);
				})
			},
			initKind(){
				this.tool.getData('/api/mall/getAllCategory',{}).then(res=>{
					console.log(res);
					if(res){  
						this.kindList = res.length ? res : [];
						this.sel_firstKind = res.length ? res[0] : {};
						this.initKindShop();
					}
				}).catch(err=>{
					console.log(err); 
				})
			},
			// 是否全选
			changeAll_sel(){
				this.sel_all_status = !this.sel_all_status;
				if(this.sel_all_status){
					this.shops = this.shops.map((item)=>{
						return {
							...item,
							choose:true,
						}
					});
					this.selShop = this.shops;
				}else{
					this.selShop = [];
					this.shops = this.shops.map((item)=>{
						return {
							...item,
							choose:false,
						}
					});
				}
				console.log(this.shops);
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
</script>

<style lang="scss">
	.kind{
		.btn_tools{
			width: 100%;
			background: white;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 6px 12px;
			box-sizing: border-box;
			.tj{
				flex: 1;
				.allPrice{
					text{
						font-size: 20px;
						color: #FF0000;
						font-weight: bold;
					}
				}
				.jiesuan{
					width: max-content;
					padding: 8px 20px;
					color: white;
					background: $col_active;
					border-radius: 40px;
					margin-left: 12px;
					font-weight: bold;
				}
			}
			.operate{
				width: auto;
				.selStatus{
					width: auto;
					font-size: 14px;
					margin-right: 12px;
					.statusIcon{
						width: 20px;
						margin-right: 8px;
					}
				}
			}
		}
		.container{
			.content{
				width:calc(100% - 184rpx);
				height:100%;
				overflow: auto;
				.shops{
					width:100%;
					padding:0 12px;
					box-sizing: border-box;
					.shopOne{
						.shopInfo{
							.yjs{
								.stock{
									color:#808080;
								}
								.yj{
									width:max-content;
									background:#FE5400;
									color:white;
									border-radius: 50px;
									padding:2px 4px;
									margin-right:12px;
								}
								font-size:12px;
								width:100%;
								margin-top:10px;
							}
							.prices{ 
								.oldPric{
									text-decoration: line-through;
									margin-left:12px;
									color:#808080;
								}
								.newPrice{
									color:#FE5400;
									text{
										font-size:14px;
									}
								}
								font-size:12px;
								width:100%;
							}
							.name{
								width:100%;
								word-break: break-all;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								margin-bottom: 6px;
							}
							width: calc(100% - 92px);
							position:relative;
						}
						.shopImg{
							width:80px;
							height:80px;
							border-radius: 4px;
							overflow: hidden;
							margin-right: 12px;
							position: relative;
							.choose{
								width:0px;
								height:0px;
								border-top: 12px solid #FF5000;
								border-left: 12px solid #FF5000;
								border-right:12px solid transparent;
								border-bottom:12px solid transparent;
								position: absolute;
								top:0;
								left:0;
								.u-icon{
									position: absolute;
									top:-9px;
									left:-9px;
									width:10px;
									height:10px;
								}
							}
						}
						width:100%;
						padding-bottom: 5px;
						margin-bottom: 10px;
					}
					width:100%;
				}
				.sortTool{
					.sortOne{
						width:30%;
						font-size:12px;
						text-align: center;
					}
					.sortOne.actSort{
						color:#FE5300;
					}
					width:100%;
					padding:12px;
					box-sizing: border-box;
				}
				.tools{
					.toolList{
						.fenlei{
							display: inline-block;
							width: max-content;
							font-size: 12px;
							background: #e9ecf1;
							padding:4px 8px;
							margin-right: 5px;
							border-radius: 4px;
						}
						.fenlei.actFL{
							color:#FE5300;
							background: rgba(254, 83, 0, 0.2);
						}
						overflow: hidden;
						overflow-x: auto;
						padding: 5px 0 5px 5px;
						height: 35px;
						width:calc(100% - 40px);
						white-space: nowrap;
						box-sizing: border-box;
					}
					.toolList::-webkit-scrollbar{
						height: 0;
					}
					.arrowIcon{
						width:40px;
						height:35px;
					}
					border-bottom: 1px solid #f8f8f8;
				}
				.tools.showAll .toolList{
					white-space: unset;
					height:auto;
				}
				.showAll .fenlei{
					margin-bottom: 5px;
				}
			}
			.zhonglei{
				.kindOne{
					width:100%;
					text-align: center;
					padding:15px 0;
					position:relative;
					font-size:13px;
				}
				.kindOne.actKind{
					background: white;
					color:#FE5300;
				}
				.kindOne.actKind::before{
					content:"";
					width:3px;
					height:80%;
					background: #FE5300;
					position: absolute;
					top:10%;
					left:0;
				}
				width:184rpx;
				height: 100%;
				overflow: auto;
				background: #e9ecf1;
			}
			.zhonglei::-webkit-scrollbar{
				width:0;
			}
			overflow: hidden;
			padding-top:12px;
			box-sizing: border-box;
		}
		height: 100%;
		overflow: hidden;
	}
	.pageHeader{
		.search{
			display: inline-block;
			width:60vw;
			padding:6px 12px;
			margin-left: 12px;
			box-sizing: border-box;
			background: #F2F2F2;
			border-radius: 50px;
		}
	}
	page{
		height: 100%;
		background: white;
	}
</style>